<template>
  <lb-layout
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
    :paddBottom="5"
  >
    <el-row>
      <el-col :span="24">
        <el-form
          ref="queryForm"
          :inline="true"
          :model="form"
          label-width="auto"
        >
          <el-form-item label="单位名称:" prop="deptId">
            <el-select
              size="small"
              v-model="form.deptId"
              filterable
              placeholder="请选择单位名称"
            >
              <el-option
                v-for="(item, index) in showDeptArr"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年份:" prop="year">
            <el-date-picker
              v-model="form.year"
              type="year"
              placeholder="请选择起始年份"
              size="small"
              :value-format="'yyyy'"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="initData"
            >
              搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="small" @click="resetQuery">
              重置
            </el-button>
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="small"
              @click="handleExport"
            >
              导出
            </el-button>
          </el-form-item>
          <br />
          <!-- <el-form-item>
            <el-tag type="success" size="medium"
              >合计部门：{{ allNum }}家</el-tag
            >
          </el-form-item>
          <el-form-item>
            <el-tag type="success" size="medium">计量单位：kgCO2</el-tag>
          </el-form-item> -->
        </el-form>
      </el-col>
      <el-col :span="12">
        <el-descriptions direction="vertical" :column="3" border>
          <el-descriptions-item label="合计部门">
            {{ allNum }}家
          </el-descriptions-item>
          <el-descriptions-item v-if="dataList.length > 0" label="总碳排放量">
            {{ dataList[0].total | numDealfilters }}
          </el-descriptions-item>
          <el-descriptions-item label="计量单位"> kgCO2 </el-descriptions-item>
        </el-descriptions></el-col
      >
    </el-row>

    <el-table
      class="mt10"
      border
      height="700"
      ref="excelTable"
      v-loading="loading"
      :data="dataList"
      row-key="deptId"
      :default-expand-all="isExpandAll"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
        prop="deptName"
        label="部门名称"
        min-width="200"
        show-overflow-tooltip
      >
      </el-table-column>

      <el-table-column
        prop="total"
        label="总碳排放量"
        show-overflow-tooltip
        align="center"
        width="150"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.total | numDealfilters }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month1"
        label="一月"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
        <template slot-scope="scope">
          <div class="link" @click="to(1, scope.row)">
            {{ scope.row.month1 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month2"
        label="二月"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
        <template slot-scope="scope">
          <div class="link" @click="to(2, scope.row)">
            {{ scope.row.month2 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month3"
        label="三月"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
        <template slot-scope="scope">
          <div class="link" @click="to(3, scope.row)">
            {{ scope.row.month3 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month4"
        label="四月"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
        <template slot-scope="scope">
          <div class="link" @click="to(4, scope.row)">
            {{ scope.row.month4 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month5"
        label="五月"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
        <template slot-scope="scope">
          <div class="link" @click="to(5, scope.row)">
            {{ scope.row.month5 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month6"
        label="六月"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
        <template slot-scope="scope">
          <div class="link" @click="to(6, scope.row)">
            {{ scope.row.month6 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month7"
        label="七月"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
        <template slot-scope="scope">
          <div class="link" @click="to(7, scope.row)">
            {{ scope.row.month7 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month8"
        label="八月"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
        <template slot-scope="scope">
          <div class="link" @click="to(8, scope.row)">
            {{ scope.row.month8 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month9"
        label="九月"
        show-overflow-tooltip
        align="center"
        min-width="100"
      >
        <template slot-scope="scope">
          <div class="link" @click="to(9, scope.row)">
            {{ scope.row.month9 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month10"
        label="十月"
        show-overflow-tooltip
        align="center"
        min-min-width="100"
      >
        <template slot-scope="scope">
          <div class="link" @click="to(10, scope.row)">
            {{ scope.row.month10 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month11"
        label="十一月"
        show-overflow-tooltip
        align="center"
        min-min-width="100"
      >
        <template slot-scope="scope">
          <div class="link" @click="to(11, scope.row)">
            {{ scope.row.month11 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="month12"
        label="十二月"
        show-overflow-tooltip
        align="center"
        min-min-width="100"
      >
        <template slot-scope="scope">
          <div class="link" @click="to(12, scope.row)">
            {{ scope.row.month12 }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </lb-layout>
</template>

<script>
import { deepClone, dealElectricity, saveQuery, outQuery } from "@/utils/index";
import { listDept } from "@/api/standingbook/newstandingbook.js";
import { getCarbonStatisticsMonth } from "@/api/carbon/index.js";
import { exportExcel } from "@/utils/xlsx";
export default {
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      isExpandAll: true,
      dataList: [],
      showDeptArr: [],
      form: {
        deptId: null,
        year: "",
      },
      allNum: 0,
      fromRouter: "",
    };
  },
  created() {
    this.getlistDept();
    this.getFormreset();
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.fromRouter = from?.path ?? "";
    });
  },
  mounted() {
    this.$nextTick(() => {
      this.form = {
        ...this.form,
        ...outQuery("carbonSsearchQuery", this.fromRouter, [
          "/statistics/carbon/day",
        ]),
      };
      this.initData();
    });
  },
  filters: {
    numDealfilters(num) {
      let result;
      let num1;
      if (typeof num == "string") {
        num1 = Number(num);
      } else {
        num1 = num;
      }
      result = dealElectricity(num1, 1, 2);
      return result;
    },
  },
  methods: {
    to(val, row) {
      let day = this.form.year + "-" + val;
      let obj = {
        deptId: this.form.deptId,
        year: this.form.year,
      };
      saveQuery("carbonSsearchQuery", obj);
      this.$router.push({
        name: "carbonDay",
        query: {
          year: this.form.year,
          month: val,
          day: day,
          deptId: row.deptId,
          deptName: row.deptName,
        },
      });
    },
    getFormreset() {
      this.form.deptId = this.$store.state.user.deptId;
      let now = new Date().getFullYear();
      this.form.year = String(now);
    },
    getlistDept() {
      this.showDeptArr = [];
      listDept(this.form)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let arr = res?.data ?? [];
          if (arr.length > 0) {
            arr.map((item) => {
              let obj = {
                label: item?.deptName,
                value: item?.deptId,
              };
              this.showDeptArr.push(obj);
            });
          }
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    initData() {
      this.loading = true;
      getCarbonStatisticsMonth({
        deptId: this.form.deptId,
        year: this.form.year,
      })
        .then((res) => {
          this.loading = false;
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let allCar = res?.data ?? {};
          this.allNum = allCar?.deptNum ?? 0;
          this.dataList = [allCar];
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.form = {
        deptId: null,
        year: "",
      };
      this.getFormreset();
      this.initData();
    },
    handleExport() {
      if (this.dataList.length <= 0) {
        this.$message.warning("无数据内容导出,请确认!");
        return;
      }
      let user = this.$store.state.user;
      let deptName = user?.deptName ?? "未知单位名称";
      let fileName = deptName + "-" + this.form.year + "年碳排放统计";
      let cols = [{ wpx: 240 }];
      exportExcel(this.$refs.excelTable, fileName, cols);
    },
  },
};
</script>

<style lang="scss" scoped>
.head {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  .title {
    font-size: 28px;
    font-weight: 400;
  }
  .el-tag {
    margin-left: 20px;
  }
  .el-button {
    position: absolute;
    right: 20px;
  }
}
.link,
.link:focus {
  color: #337ab7;
  cursor: pointer;

  &:hover {
    color: rgb(32, 160, 255);
  }
}
::v-deep .el-form-item {
  margin-bottom: 10px;
}
::v-deep .el-descriptions-item__cell {
  text-align: center !important;
}
</style>
